<style lang="scss">
#drugEffcacy{
    .card{
        height: auto;
    }
    .sign-button-defalut{
        color:#8cc5ff;
        cursor: not-allowed;
        background:#ecf5ff;
        border:1px solid #d9ecff;
    }
    .img-dialog{
        text-align:center;
        img{
            display: inline-block;
            width:600px;
            height:600px;
        }
    }
}
</style>
<template>
    <div id="drugEffcacy" class="content-mask" v-loading="loading">
        <div class="card">
            <el-row type="flex">
                <el-col :span="14">
                    <p class="l-title">
                        <img src="/static/image/xgjy.png" />
                        <span>相关基因</span>
                    </p>
                    <div class="block" v-if="geneList.length>0">
                        <p class="block-title">靶向用药</p>
                        <div class="normal-button-content">
                            <span @click="goGene(item.geneId)" v-for="(item,index) in geneList" :key="index">{{item.entrezSymbol}}</span>
                        </div>
                    </div>
                    <div class="block" v-else>
                        暂无相关基因
                    </div>
                </el-col>
                <el-col :span="10">
                    <p class="l-title">
                        <img src="/static/image/xhtl.png" />
                        <span>信号通路</span>
                    </p>
                    <div class="block">
                        <div class="primary-button-content">
                            <span @click="showImage" v-if="drug.drugLx == 1" class="sign-button">药效学信号通路</span>
                            <span v-else class="sign-button-defalut">药效学信号通路</span>
                            <p>非组织特异性癌细胞模型，表皮生长因子受体（EGFR）特异性酪氨酸激酶抑制剂或单克隆抗体的治疗所涉及信号通路</p>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="card">
            <p class="l-title">
                <img src="/static/image/bywd.png" />
                <span>变异位点</span>
            </p>
            <div class="block">
                <div class="block" v-if="genVariantModels.length>0">
                    <div class="block-item" v-for="(item,index) in genVariantModels" :key="index">
                        <p class="primary-button-content">
                            <!-- <span :class="item.entrezSymbol==activeEntrezSymbol ? 'isActive' :''" @click="getTargetEvidentList(item.geneid,item.entrezSymbol)">{{item.entrezSymbol}}</span> -->
                            <span  @click="getTargetEvidentList(item.geneid,item.entrezSymbol)">{{item.entrezSymbol}}</span>
                        </p>
                        <p class="normal-button-content" v-if="item.variantList && item.variantList.length>0">
                            <span @click="goTargetVariation(it.variantId)" v-for="(it,idx) in item.variantList" :key="idx">{{it.variantName}}</span>
                        </p>
                    </div>
                </div>
                <div class="block" v-else>
                    暂无变异位点
                </div>
            </div>
        </div>
        <el-dialog title="药效学信号通路" :visible.sync="dialogVisible" width="700px" class="img-dialog">
            <img  v-if="dialogVisible && drug.drugLx == 1" :src="imgUrl+drug.drugId+'_YX.png'" />
        </el-dialog>
        <el-dialog :visible.sync="isLczjShow" width="70%">
            <span slot="title" class="dialog-header">临床证据</span>
            <div class="dialog-cont" style="overflow:auto;">
                <div class="card">
                    <p class="l-title">
                        <img src="/static/image/lczj.png" />
                        <span>临床证据</span>
                    </p>
                    <div class="block">
                        <el-table :data="targetEvidentList" v-loading="tableLoading" border height="300">
                            <el-table-column align="center" label="变异名称" prop="variantName"></el-table-column>
                            <el-table-column align="center" label="entrez_Symbol" prop="entrezSymbol"></el-table-column>
                            <el-table-column align="center" label="变异来源" prop="variantOrigin"></el-table-column>
                            <el-table-column align="center" label="药物" prop="drugName"></el-table-column>
                            <!-- <el-table-column align="center" label="药物" >
                                <template slot-scope="scope">
                                    <a @click="goDrug(scope.row.drugId)" href="javascript:;">{{scope.row.drugName}}</a>
                                </template>
                            </el-table-column> -->
                            <el-table-column align="center" label="适应症" prop="diseaseDisplayName"></el-table-column>
                            <el-table-column align="center" label="证据等级" prop="level"></el-table-column>
                            <el-table-column align="center" label="证据类型" prop="evidenceType"></el-table-column>
                            <el-table-column align="center" label="临床意义" prop="clinicalSignificance"></el-table-column>
                            <el-table-column align="center" label="PMID" prop="pubmedId"></el-table-column>
                            <el-table-column align="center" label="详情">
                                <template slot-scope="scope">
                                    <a href="javascript:;" @click="showEvidence(scope.row)">详情</a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- <div class="block" v-else>
                        无
                    </div> -->
                    <p class="l-title">
                        <img src="/static/image/zjxq.png" />
                        <span>证据详情</span>
                    </p>
                    <div class="block" v-if="isEvidenceShow">
                        <div class="evidence-content">
                            <p>{{targetEvidentObject.descEn}}</p>
                        </div>
                        <el-row class="el-row-evidence">
                            <el-col class="fontWeight600" :span="4">证据等级</el-col>
                            <el-col :span="4">&nbsp;{{targetEvidentObject.level}}&nbsp;</el-col>
                            <el-col class="fontWeight600" :span="4">适应症</el-col>
                            <el-col :span="12">&nbsp;{{targetEvidentObject.diseaseDisplayName}}&nbsp;</el-col>
                        </el-row>
                        <el-row class="el-row-evidence">
                            <el-col class="fontWeight600" :span="4">证据类型</el-col>
                            <el-col :span="4">&nbsp;{{targetEvidentObject.evidenceType}}&nbsp;</el-col>
                            <el-col class="fontWeight600" :span="4">变异来源</el-col>
                            <el-col :span="12">&nbsp;{{targetEvidentObject.variantOrigin}}&nbsp;</el-col>
                        </el-row>
                        <el-row class="el-row-evidence">
                            <el-col class="fontWeight600" :span="4">临床意义</el-col>
                            <el-col :span="4">&nbsp;{{targetEvidentObject.clinicalSignificance}}&nbsp;</el-col>
                            <el-col class="fontWeight600" :span="4">参考文献</el-col>
                            <el-col :span="12">&nbsp;</el-col>
                        </el-row>
                        <el-row class="el-row-evidence">
                            <el-col class="fontWeight600" :span="4">药物</el-col>
                            <el-col :span="4">&nbsp;{{targetEvidentObject.drugName}}&nbsp;</el-col>
                            <el-col class="fontWeight600" :span="4">PMID</el-col>
                            <el-col :span="12">&nbsp;{{targetEvidentObject.pubmedId}}&nbsp;</el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {medicine} from 'api/index.js';
import { imgUrl } from '@/common/js/Base.js';
export default {
    name: 'drugEffcacy',
    data(){
        return{
            isEvidenceShow:false, //是否显示证据详情
            loading:false,
            isLczjShow:false,
            tableLoading:false,
            imgUrl:imgUrl,
            drugId:"",
            dialogVisible:false,
            targetObject:{},
            drug:{}, //药物基本信息
            geneList:[], //基因列表
            genVariantModels:[], //变异位点
            targetEvidentList:[], //临床证据 
            targetEvidentObject:{},//证据详情
            activeEntrezSymbol:""//当前激活临床证据的靶向基因    
        }
    },
    methods:{
        getDrugEffcacy(){
            let obj = {
                id : this.drugId
            };
            this.loading = true;
            medicine.getTargetByDrugId(obj).then((data)=>{
                if(data.status == 200){
                   if(data.data){
                       this.targetObject = data.data;
                       this.getDetails();
                   }
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
                this.$message.error("获取药物疗效失败");
            });
        },
        //获取其他详细信息
        getDetails(){
            //药物基本信息

            if(this.targetObject.drug){
                this.drug = this.targetObject.drug;
            }
            this.$emit("drugName",this.drug.chName+"("+this.drug.drugName+")");
            //相关基因
            if(this.targetObject.geneList && this.targetObject.geneList.length>0){
                this.geneList = this.targetObject.geneList;
            }else{
                this.geneList = [];
            }
            //变异位点
            if(this.targetObject.genVariantModels && this.targetObject.genVariantModels.length>0){
                this.genVariantModels = this.targetObject.genVariantModels;
                // this.activeEntrezSymbol = this.genVariantModels[0].entrezSymbol;
                // this.getTargetEvidentList(this.genVariantModels[0].geneid,this.genVariantModels[0].entrezSymbol);
            }else{
                this.genVariantModels = [];
            }
        },
        //跳转至基因页面
        goGene(id){
            this.$router.push("/gene?geneId="+id);
        },
        //跳转至靶向变异页面
        goTargetVariation(id){
            this.$router.push("/targetVariation?variantId="+id);
        },
        goDrug(id){
            this.$router.push("/basic?id="+id);
        },
        //展示证据详情
        showEvidence(row){
            this.isEvidenceShow = true;
            this.targetEvidentObject = row;
        },
        getTargetEvidentList(id,entrezSymbol){
            this.isLczjShow = true;
            let obj = {
                geneid : id,
                drugid : this.drug.drugId
            };
            this.tableLoading = true;
            medicine.getTargetEvidentsByGeneId(obj).then((data)=>{
                if(data.status == 200){
                   this.targetEvidentList = data.data;
                //    this.activeEntrezSymbol = entrezSymbol;
                }else{
                    this.$message.error(data.msg);
                }
                this.tableLoading = false;
            }).catch(error => {
                this.tableLoading = false;
                this.$message.error("获取临床证据失败");
            });
        },
        //显示药理学信号通路
        showImage(){
            this.dialogVisible = true;
        }
    },
    mounted() {
        this.drugId = this.$store.state.searchId ? this.$store.state.searchId: '';
        this.getDrugEffcacy();
    },
    watch:{
        "$store.state.searchId":function(){
            if(this.drugId != this.$store.state.searchId){
                this.drugId = this.$store.state.searchId;
                this.getDrugEffcacy();
            }
        }
    },
}
</script>
